<!--spu管理，spu相当于类，然后里面的列表数据相当于一个实例，这里的spu是商品分类的管理-->
<template>
  <div>
    <el-card style="margin-bottom: 20px">
      <category-selector @getCategoryAllId="getCategoryAllId"></category-selector>
    </el-card>
    <el-card>
      <!--    展示spu-->
      <div v-show="showThis === 'show'">
        <el-button :disabled="currentCategoryId.category3Id === '' || currentCategoryId.category3Id === undefined"
                   class="el-icon-plus"
                   style="margin-bottom: 15px" type="primary"
                   @click="addSpu"
        >添加spu
        </el-button>
        <el-table :data="spuList" border style="width: 100%" v-loading="loading">
          <el-table-column align="center" label="序号" type="index" width="70"></el-table-column>
          <el-table-column label="spu名称" prop="spuName" width="280">
          </el-table-column>
          <el-table-column label="spu描述" prop="description">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <!--              添加sku-->
              <tip-button effect="light" icon="el-icon-plus" size="mini" title="添加sku" type="primary" @click.native="addSku(scope.row)"></tip-button>
              <!--              编辑spu-->
              <tip-button effect="light" icon="el-icon-edit" size="mini" title="编辑spu" type="warning" @click.native="editSpu(scope.row)"></tip-button>
              <!--              展示sku-->
              <tip-button effect="light" icon="el-icon-s-help" size="mini" title="查看当前spu的sku列表" type="info" @click.native="showSku(scope.row)"></tip-button>
              <!--              删除spu-->
              <el-popconfirm title="确认删除这个spu吗" @onConfirm="deleteSpu(scope.row)">
                <tip-button slot="reference" effect="light" icon="el-icon-delete" size="mini" style="margin-left: 10px" title="删除spu" type="danger"></tip-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!--    添加sku-->
      <add-sku v-show="showThis === 'editSku'" ref="editSkuRef" @changeShowSku="changeShowSku"></add-sku>
      <!--    添加或者修改spu-->
      <add-or-update-spu v-show="showThis === 'editSpu'" ref="editSpuRef" @changeShow="changeShow"></add-or-update-spu>
      <!--      分页器-->
      <el-pagination
        :current-page="currentPage"
        :page-size="pageSize"
        :page-sizes="[5, 10, 15, 20]"
        :total="total"
        hide-on-single-page
        layout="prev, pager, next, jumper,->,sizes,total"
        style="text-align: center;margin-top: 25px"
        @size-change="handleChangeSize"
        @current-change="handleChangeCurrentPage"
      >
      </el-pagination>
    </el-card>
<!--    展示spu下的sku列表的对话框-->
    <el-dialog
      :before-close="handleClose"
      :visible.sync="dialogVisible"
      title="sku列表"
      width="60%">
      <el-table v-loading="loading" :data="skuList" style="width: 100%">
        <el-table-column prop="skuName" label="名称"></el-table-column>
        <el-table-column prop="price" label="价格"></el-table-column>
        <el-table-column prop="weight" label="重量"></el-table-column>
        <el-table-column label="默认图片">
          <template slot-scope="scope">
            <el-image style="width: 100px;height: 100px" :src="scope.row.skuDefaultImg"></el-image>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
         <el-button type="primary" @click="dialogVisible = false;skuList=[]">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import AddOrUpdateSpu from './AddOrUpdateSpu'
import AddSku from './AddSku'

export default {
  name: "Spu",
  components: {
    AddOrUpdateSpu,
    AddSku
  },
  data() {
    return {
      showThis: 'show', // 展示哪个列表 show ， editSpu ， editSku
      currentPage: 1, // 当前页
      pageSize: 5, // 当前页面数据量
      total: 0, // 总共有多少页
      currentCategoryId: {}, // 当前三级分类的Id
      spuList: [], // spu列表
      dialogVisible: false, // 展示对话框的显示和隐藏
      skuList:[], // 当前spu下的sku列表的数据
      loading: false // 控制加载效果
    }
  },
  methods: {
    // 自定义事件获取当前分类的id
    getCategoryAllId(res) {
      this.currentCategoryId = res
      if (this.currentCategoryId.category3Id !== '') {
        this.getSpuList()
      } else {
        this.spuList = []
        this.total = 0
        this.showThis = 'show'
        // 调用spu喊他清空表单
        this.$refs.editSpuRef.resetForm()
      }
    },
    // 获取spu数据列表
    async getSpuList() {
      this.loading = true
      // 解构请求需要的数据
      const {currentPage, pageSize, currentCategoryId} = this
      // 发送请求获取spu信息
      let res = await this.$API.spu.apiSpuInfo({
        page: currentPage,
        limit: pageSize,
        category3Id: currentCategoryId.category3Id
      })
      if (res.code === 200) {
        this.spuList = res.data.records
        this.total = res.data.total
      } else {
        this.$message.error('获取数据失败')
      }
      this.loading = false
    },
    // 一页展示多少条数据尺寸发生变化
    handleChangeSize(currentSize) {
      this.pageSize = currentSize
      // 发送请求重新获取数据
      this.getSpuList()
    },
    // 当前页面数发送变化
    handleChangeCurrentPage(currentPage) {
      this.currentPage = currentPage
      // 发送请求重新获取数据
      this.getSpuList()
    },
    // 添加sku
    addSku(row) {
      this.showThis = 'editSku'
      // 调用sku组件中的初始化数据的方法
      this.$refs.editSkuRef.initAddSkuInfo(row, this.currentCategoryId)
      this.total = 0
    },
    // 打开spu编辑框
    editSpu(row) {
      this.showThis = 'editSpu'
      // 调用子组件AddOrUpdateSpu中初始化spu信息的方法
      this.$refs.editSpuRef.initUpdateSpuInfo(row)
    },
    // 删除spu
    async deleteSpu(row) {
      let res = await this.$API.spu.apiDeleteSpu(row.id)
      if (res.code === 200) {
        this.getSpuList()
        this.$message.success('删除成功')
      } else {
        this.$message.error('删除失败')
      }
    },
    // 添加spu框
    addSpu() {
      this.$refs.editSpuRef.initAddSpuInfo(this.currentCategoryId)
      this.showThis = 'editSpu'
    },
    // 展示当前spu下的sku
    async showSku(row) {
      this.loading = true
      this.dialogVisible = true
      let res = await this.$API.sku.apiGetSkuList(row.id)
      if(res.code !== 200) {
        this.dialogVisible = false
        this.$message.error('获取数据失败')
        return
      }
      this.loading = false
      this.skuList = res.data
    },
    // 展示sku对话框关闭前的回调
    handleClose() {
      // 清除skuList的数据
      this.skuList = []
      this.dialogVisible = false
    },
    // 自定义事件改变当前展示页面
    changeShow(showType, type) {
      this.showThis = showType
      if (type === 'add') {
        // 如果是add，跳转到第一页
        this.currentPage = 1
        this.getSpuList()
      } else {
        this.getSpuList()
      }
    },
    // 添加sku的自定义事件
    changeShowSku(showType) {
      this.showThis = showType
    }
  }
}
</script>

<style scoped>
.avatar-uploader {
  width: 150px;
  height: 150px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 150px;
  height: 150px;
  line-height: 150px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
